<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1,user-scalable=no">
    <title>旅游推荐</title>
    <link href="./css/bootstrap.min.css" rel="stylesheet">

    <style type="text/css">
        body {
            padding: 50px 0;
        }
        
        .haichen-carousel {
            height: 500px;
            overflow: hidden;
        }
        
        .haichen-carousel img {
            width: 100%;
        }
        
        .haichen-container {
            text-align: center;
            margin-top: 50px;
        }
        
        .username p {
            float: right;
            display: block;
            margin-left: 8px;
            line-height: 48px;
        }
        
        .username p a {
            text-decoration: none;
            padding-bottom: 4px;
        }
        
        .username p a:hover {
            color: aqua;
            border-bottom: 2px solid aqua;
        }
    </style>
</head>

<body>
    <!--导航-->
    <div class="container">
        <nav class="navbar navbar-default navbar-fixed-top">
            <div class="container">
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
			  <span class="sr-only">Toggle navigation</span>
			  <span class="icon-bar"></span>
			  <span class="icon-bar"></span>
			  <span class="icon-bar"></span>
			</button>
                    <a class="navbar-brand" href="index.html">旅游推荐</a>
                </div>
                <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                    <ul class="nav navbar-nav">
                        <li class="active"><a href="旅游路线.html">旅游路线</a></li>
                        <li><a href="地方简述.html">地方简述</a></li>
                        <li>
                            <a href="旅游好书.html">旅游好书 </a>
                        </li>
                        <li><a href="路线选取.html">路线选取</a></li>
                    </ul>

                    <div class="username">
                        <p><a href="login.html">登入</a></p>
                        <p><a href="register.html">注册</a></p>


                    </div>
                </div>
            </div>
        </nav>
    </div>

    <!--轮播图  data-pause="null" data-wrap="true" data-interval="1000"-->
    <div id="carousel-example-generic" class="haichen-carousel carousel slide" data-ride="carousel" data-wrap="true">
        <ol class="carousel-indicators">
            <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
            <li data-target="#carousel-example-generic" data-slide-to="1"></li>
            <li data-target="#carousel-example-generic" data-slide-to="2"></li>
            <li data-target="#carousel-example-generic" data-slide-to="3"></li>

        </ol>

        <div class="carousel-inner" role="listbox">
            <div class="item active">
                <img src="./images/banner.jpg">

            </div>
            <div class="item">
                <img src="./images/海南轮播.jpg">

            </div>
            <div class="item">
                <img src="./images/丽水轮播.jfif">

            </div>
            <div class="item">
                <img src="./images/大理轮播.jpg">

            </div>


        </div>

        <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
            <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
            <span class="sr-only">Previous</span>
        </a>
        <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
            <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
            <span class="sr-only">Next</span>
        </a>
    </div>

    <!--栅格-->
    <div class="container haichen-container">
        <div class="row">
            <div class="col-md-4">
                <img src="images/lishui.jfif" style="border-radius: 150px;">
                <div class="caption">
                    <h3>浙江丽水</h3>
                    <p>丽水被誉为“浙江绿谷”，相继被命名为“中国优秀旅游城市”、“中国优秀生态旅游城市”。</p>
                    <p><a href="#" class="btn btn-default" role="button">点我了解</a></p>
                </div>
            </div>
            <div class="col-md-4">
                <img src="images/大理.jpg" style="border-radius: 150px;">
                <div class="caption">
                    <h3>云南大理</h3>
                    <p>大理市，是大理白族自治州的首府，地处云南省西部，苍山之麓，洱海之滨，是古代南诏国和大理国的都城</p>
                    <p><a href="#" class="btn btn-default" role="button">点我了解</a></p>
                </div>
            </div>
            <div class="col-md-4">
                <img src="images/桂林.jfif " style=" border-radius: 150px; ">
                <div class="caption">
                    <h3>广西桂林</h3>
                    <p>桂林，，是世界著名风景游览城市、万年智慧圣地、全国重要高新技术产业基地</p>
                    <p><a href="#" class="btn btn-default" role="button">点我了解</a></p>
                </div>
            </div>
        </div>
    </div>

    <!--分割线-->
    <div class="container">
        <hr style="margin: 50px 0;" />
    </div>

    <!--标签页-->
    <div class="container">
        <!-- Nav tabs -->
        <ul class="nav nav-tabs" role="tablist" id="damu-tab">
            <li role="presentation" class="active"><a href="#Lishui" aria-controls="home" role="tab" data-toggle="tab">丽水</a></li>
            <li role="presentation"><a href="#Dali" aria-controls="profile" role="tab" data-toggle="tab">大理</a></li>
            <li role="presentation"><a href="#Guilin" aria-controls="messages" role="tab" data-toggle="tab">桂林</a></li>
            <li role="presentation"><a href="#Lasa" aria-controls="settings" role="tab" data-toggle="tab">拉萨</a></li>
            <li role="presentation"><a href="#Hainan" aria-controls="settings" role="tab" data-toggle="tab">海南</a></li>
        </ul>
        <!-- Tab panes -->
        <div class="tab-content">
            <div role="tabpanel" class="tab-pane active" id="Lishui">
                <div class="col-md-7">
                    <h2 class="feature-heading">丽水 <span class="text-muted">“浙江绿谷”</span></h2>
                    <p class="lead">丽水被誉为“浙江绿谷”，境内海拔1000米以上的山峰有3573座，龙泉市凤阳山 黄茅尖海拔1929米，庆元县百山祖海拔1856.7米，分别为浙江省第一、第二高峰。 2005年1月，丽水市被命名为第三批国家级生态示范区；2009年12月，相继被命名为“中国优秀旅游城市”、“中国优秀生态旅游城市”。
                    </p>
                </div>
                <div class="col-md-5">
                    <img class="feature-image img-responsive" src="images/丽水2.jpg" style=" border-radius: 28px; ">
                </div>
            </div>
            <div role="tabpanel" class="tab-pane" id="Dali">
                <div class="col-md-5">
                    <img class="feature-image img-responsive" src="images/大理5.jfif" style=" border-radius: 28px; ">
                </div>
                <div class="col-md-7">
                    <h2 class="feature-heading">大理 <span class="text-muted"></span></h2>
                    <p class="lead">大理市，是大理白族自治州的首府，地处云南省西部，云贵高原上的洱海平原，苍山之麓，洱海之滨，是古代南诏国和大理国的都城，作为古代云南地区的政治、经济和文化中心，时间长达五百余年。根据第七次人口普查数据，截至2020年11月1日零时，大理市常住人口为771128人
                    </p>
                </div>
            </div>
            <div role="tabpanel" class="tab-pane" id="Guilin">
                <div class="col-md-7">
                    <h2 class="feature-heading">桂林 <span class="text-muted">甲天下</span></h2>
                    <p class="lead">桂林，简称桂，广西壮族自治区辖地级市、省域副中心城市，是世界著名风景游览城市、万年智慧圣地、全国重要高新技术产业基地，中国老工业基地，是国务院批复确定的中国对外开放国际旅游城市
                    </p>
                </div>
                <div class="col-md-5">
                    <img class="feature-image img-responsive" src="images/桂林10.jpg" style=" border-radius: 28px; ">
                </div>
            </div>
            <div role="tabpanel" class="tab-pane" id="Lasa">
                <div class="col-md-5">
                    <img class="feature-image img-responsive" src="images/拉萨10.jpg" style=" border-radius: 28px; ">
                </div>
                <div class="col-md-7">
                    <h2 class="feature-heading">拉萨 <span class="text-muted">日光城</span></h2>
                    <p class="lead">拉萨是首批国家历史文化名城，拉萨以风光秀丽、历史悠久、风俗民情独特、宗教色彩浓厚而闻名于世。7世纪，松赞干布统一全藏，将政治中心从山南迁到拉萨。先后荣获中国优秀旅游城市、欧洲游客最喜爱的旅游城市、全国文明城市、中国最具安全感城市、中国特色魅力城市200强、世界特色魅力城市200强 [4] 、2018畅游中国100城 [5] 等荣誉称号
                    </p>
                </div>
            </div>
            <div role="tabpanel" class="tab-pane" id="Hainan">
                <div class="col-md-7">
                    <h2 class="feature-heading">海南 <span class="text-muted">简称“琼”</span></h2>
                    <p class="lead">海南岛轮廓形似一个椭圆形大雪梨，地势四周低平，中间高耸，呈穹隆山地形，以五指山、鹦哥岭为隆起核心，向外围逐级下降，由山地、丘陵、台地、平原等地貌构成。海南属热带季风气候，全年暖热，雨量充沛。 [3-4] 截至2019年末，海南省辖4个地级市，5个县级市、4个县、6个自治县 [5] 。截至2021年，海南省常住人口1020.46万人，比上年增加12.34万
                    </p>
                </div>
                <div class="col-md-5">
                    <img class="feature-image img-responsive" src="images/海南10.png" style=" border-radius: 28px; ">
                </div>
            </div>
        </div>
    </div>



    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="myModalLabel">弹出层</h4>
                </div>
                <div class="modal-body">
                    啦啦啦啦啦
                </div>
            </div>
        </div>
    </div>

    <!--分割线-->
    <div class="container">
        <hr style="margin: 2px 0px 50px 0px;" />
    </div>

    <!-- foot -->
    <div class="container">
        <div class="row">

            <div class="progress active ">
                <div class="progress-bar progress-bar-success progress-bar-striped" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%">
                    <span>全国40%去过丽水</span>
                </div>
            </div>
            <div class="progress active ">
                <div class="progress-bar progress-bar-info progress-bar-striped" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%">
                    <span>全国20%去过大理</span>
                </div>
            </div>
            <div class="progress active ">
                <div class="progress-bar progress-bar-warning progress-bar-striped" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%">
                    <span>全国60%的人去过桂林</span>
                </div>
            </div>
            <div class="progress active ">
                <div class="progress-bar progress-bar-danger progress-bar-striped" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%">
                    <span>有80%的人去过拉萨</span>
                </div>
            </div>

        </div>


    </div>

    <!-- 底部分页 -->
    <div class="container text-center">


        <nav aria-label="...">
            <ul class="pagination">
                <li class="disabled">
                    <span>
                          <span aria-hidden="true">&laquo;</span>
                    </span>
                </li>
                <li class="active">
                    <a href="index.html"><span>1 </span></a>
                </li>
                <li>
                    <a href="旅游路线.html"><span>2 </span></a>
                </li>
                <li>
                    <a href="地方简述.html"><span>3 </span></a>
                </li>
                <li>
                    <a href="旅游好书.html"><span>4 </span></a>
                </li>
                <li>
                    <a href="路线选取.html"><span>5 </span></a>
                </li>
            </ul>
        </nav>


    </div>




    <footer class="container" style="margin-top: 50px;color: gray;">
        <p>&copy; 前端一班 黄海辰 </p>
    </footer>
    <script src="./js/jquery.min.js"></script>
    <script src="./js/bootstrap.min.js"></script>

</body>

</html>